<template>
  <div id="addEditContainer">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      新增活动
    </h1>
    <div class="container">
      <el-tabs v-model="configCard" @tab-click="handleClick">
        <el-tab-pane label="通用活动配置" name="generalConfig">
          <generalConfig
            ref="generalConfig"
            :activityInfo="activityInfo"
            @handleClick="handleClick"
          ></generalConfig>
        </el-tab-pane>
        <el-tab-pane label="活动定制配置" name="customConfig">
          <customConfig
            ref="customConfig"
            :activityInfo="activityInfo"
            @handleClick="handleClick"
          ></customConfig>
        </el-tab-pane>
        <el-tab-pane label="参与用户规则" name="userRules">
          <userRules
            ref="userRules"
            :routeName="'wh:collectPraise:activityList'"
            :activityInfo="activityInfo"
            @handleClick="handleClick"
            @submitConfig="submitConfig"
          ></userRules>
        </el-tab-pane>
        <el-tab-pane
          label="奖品配置"
          name="prizeConfig"
          :disabled="!params.activityId"
        >
          <prizeConfig
            ref="prizeConfig"
            :params="params"
            @handleClick="handleClick"
          ></prizeConfig>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import generalConfig from './generalConfig'
import customConfig from './customConfig'
import userRules from '../../common/userRules'
import prizeConfig from '../../common/prizeConfig'
import {
  addPoster,
  getPosterDetail,
  changePoster
} from '@/api/activityCenter/activityManage/collectPraise'
import {
  getPrizeList,
  prizeDisable,
  prizeEnable,
  addPrize,
  getPrizeDetail,
  editPrize
} from '@/api/activityCenter/activityManage/common'
export default {
  components: { generalConfig, customConfig, userRules, prizeConfig },
  data() {
    return {
      configCard: 'generalConfig',
      params: {
        activityId: '',
        activityType: 'PRAISE',
        getPrizeList,
        prizeDisable,
        prizeEnable,
        addPrize,
        getPrizeDetail,
        editPrize
      },
      activityInfo: {}
    }
  },
  mounted() {
    const { type } = this.$route.query
    if (type === 'edit' || type === 'copy') {
      getPosterDetail(this.$route.query.id, {}, (res) => {
        this.params.activityId = res.activityId
        this.activityInfo = res
      })
    }
  },
  methods: {
    getPrizeList,
    prizeDisable,
    prizeEnable,
    addPrize,
    getPrizeDetail,
    editPrize,
    /* 选项卡切换 */
    handleClick(tab) {
      this.configCard = tab.name
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: 'wh:collectPraise:activityList' })
    },
    /* 保存 */
    submitConfig() {
      const arr = ['generalConfig', 'customConfig', 'userRules']
      let obj = {}
      arr.forEach((item) => {
        const res = this.$refs[item].collectData()
        if (res.tab) this.configCard = res.tab
        obj = Object.assign(obj, res)
      })
      const { type } = this.$route.query
      if (!obj.tab && (type === 'add' || type === 'copy')) {
        addPoster(obj, (res) => {
          this.params.activityId = res.id
          if (res.id) this.configCard = 'prizeConfig'
        })
      } else if (!obj.tab) {
        changePoster(this.$route.query.id, obj, () => {
          this.configCard = 'prizeConfig'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid rgb(147, 147, 147);
}
</style>
